﻿@using Kevin.Shop.Business.Service.Entity.Helper
@model RiderShop.Mobile.Modle.MyAccount.UserProfileModel
@{
    Layout = "../Shared/_MobileLayout.cshtml";
}
@section header
{
    <style>
        .myAccountActive {
            color: #ff6c1f;
        }

        div.err_msg {
            display: inline-block;
            color: #c00;
        }
    </style>
}
@section title
{
个人资料
}
@section pagetitle
{
个人资料
}
<!-- InstanceBeginEditable name="body" -->
<div class="userCenterHeader">
    <span class="iconWrapper">
        <img src="~/Themes/RongJi/Style/base/imgs/icon_xun.png">
    </span>
    <h3>个人资料</h3>
    <br class="clearfix">
</div>
<div class="box">
    <form action="~/MyAccount/Profile" method="post" id="profileForm">
        <input type="hidden" name="UserId" value="@Model.CurrentUser.UserId">

        <p class="text-muted">用户名</p>
        <input name="UserName" type="text" id="UserName" value="@Model.CurrentUser.UserName" class="form-control" placeholder="请填写您的用户名" disabled="disabled">


        <p class="text-muted">手机 
        @if (Model.CurrentUser.IsCellPhoneVerified)
        {
            <span style="color:green;">（已验证）</span>
        }
        else
        {
            <a style="color:red;text-decoration:underline;" href="/Customer/BindCellPhone">(去绑定)</a>
        }
        </p>
        <input name="CellPhone" type="tel" id="CellPhone" value="@Model.CurrentUser.CellPhone" class="form-control" placeholder="请填写您的手机号" @(Model.CurrentUser.IsCellPhoneVerified ? "readonly" : "")>
        <p class="text-muted">姓名</p>
        <input name="RealName" type="text" id="RealName" value="@Model.CurrentUser.RealName" class="form-control" placeholder="请填写您的姓名">
        <p class="text-muted">邮箱</p>
        <input name="Email" type="email" id="Email" value="@(Model.CurrentUser.Email.EndsWith("@notset.com") ? string.Empty : Model.CurrentUser.Email)" class="form-control" placeholder="请填写您的邮箱">
        <p class="text-muted">生日</p>
        <div class="row mt5">
            <input type="hidden" id="BirthDate" name="BirthDate" placeholder="请选择生日" value='@Model.BirthDate' />
            <div class="col-xs-4 ">
                <select name="birth_year" class="select " id="selectYear">
                    <!--auth Eric_wu-->
                    <option value="1921">1921年</option>
                    <option value="1922">1922年</option>
                    <option value="1923">1923年</option>
                    <option value="1924">1924年</option>
                    <option value="1925">1925年</option>
                    <option value="1926">1926年</option>
                    <option value="1927">1927年</option>
                    <option value="1928">1928年</option>
                    <option value="1929">1929年</option>
                    <option value="1930">1930年</option>
                    <option value="1931">1931年</option>
                    <option value="1932">1932年</option>
                    <option value="1933">1933年</option>
                    <option value="1934">1934年</option>
                    <option value="1935">1935年</option>
                    <option value="1936">1936年</option>
                    <option value="1937">1937年</option>
                    <option value="1938">1938年</option>
                    <option value="1939">1939年</option>
                    <option value="1940">1940年</option>
                    <option value="1941">1941年</option>
                    <option value="1942">1942年</option>
                    <option value="1943">1943年</option>
                    <option value="1944">1944年</option>
                    <option value="1945">1945年</option>
                    <option value="1946">1946年</option>
                    <option value="1947">1947年</option>
                    <option value="1948">1948年</option>
                    <option value="1949">1949年</option>
                    <option value="1950">1950年</option>
                    <option value="1951">1951年</option>
                    <option value="1952">1952年</option>
                    <option value="1953">1953年</option>
                    <option value="1954">1954年</option>
                    <option value="1955">1955年</option>
                    <option value="1956">1956年</option>
                    <option value="1957">1957年</option>
                    <option value="1958">1958年</option>
                    <option value="1959">1959年</option>
                    <option value="1960">1960年</option>
                    <option value="1961">1961年</option>
                    <option value="1962">1962年</option>
                    <option value="1963">1963年</option>
                    <option value="1964">1964年</option>
                    <option value="1965">1965年</option>
                    <option value="1966">1966年</option>
                    <option value="1967">1967年</option>
                    <option value="1968">1968年</option>
                    <option value="1969">1969年</option>
                    <option value="1970">1970年</option>
                    <option value="1971">1971年</option>
                    <option value="1972">1972年</option>
                    <option value="1973">1973年</option>
                    <option value="1974">1974年</option>
                    <option value="1975">1975年</option>
                    <option value="1976">1976年</option>
                    <option value="1977">1977年</option>
                    <option value="1978">1978年</option>
                    <option value="1979">1979年</option>
                    <option value="1980">1980年</option>
                    <option value="1981">1981年</option>
                    <option value="1982">1982年</option>
                    <option value="1983">1983年</option>
                    <option value="1984">1984年</option>
                    <option value="1985">1985年</option>
                    <option value="1986">1986年</option>
                    <option value="1987">1987年</option>
                    <option value="1988">1988年</option>
                    <option value="1989">1989年</option>
                    <option value="1990">1990年</option>
                    <option value="1991">1991年</option>
                    <option value="1992">1992年</option>
                    <option value="1993">1993年</option>
                    <option value="1994">1994年</option>
                    <option value="1995">1995年</option>
                    <option value="1996">1996年</option>
                    <option value="1997">1997年</option>
                    <option value="1998">1998年</option>
                    <option value="1999">1999年</option>
                    <option value="2000">2000年</option>
                    <option value="2001">2001年</option>
                    <option value="2002">2002年</option>
                    <option value="2003">2003年</option>
                    <option value="2004">2004年</option>
                    <option value="2005">2005年</option>
                    <option value="2006">2006年</option>
                    <option value="2007">2007年</option>
                    <option value="2008">2008年</option>
                    <option value="2009">2009年</option>
                    <option value="2010">2010年</option>
                    <option value="2011">2011年</option>
                    <option value="2012">2012年</option>
                    <option value="2013">2013年</option>
                    <option value="2014">2014年</option>
                </select>
            </div>
            <div class="col-xs-4">
                <select name="birth_month" class="select" id="selectMonth">
                    <!--auth Eric_wu-->
                    <option value="01">1月</option>
                    <option value="02">2月</option>
                    <option value="03">3月</option>
                    <option value="04">4月</option>
                    <option value="05">5月</option>
                    <option value="06">6月</option>
                    <option value="07">7月</option>
                    <option value="08">8月</option>
                    <option value="09">9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
            </div>
            <div class="col-xs-4">
                <select name="birth_date" class="select" id="selectDate">
                    <!--auth Eric_wu-->
                    <option value="01">1日</option>
                    <option value="02">2日</option>
                    <option value="03">3日</option>
                    <option value="04">4日</option>
                    <option value="05">5日</option>
                    <option value="06">6日</option>
                    <option value="07">7日</option>
                    <option value="08">8日</option>
                    <option value="09">9日</option>
                    <option value="10">10日</option>
                    <option value="11">11日</option>
                    <option value="12">12日</option>
                    <option value="13">13日</option>
                    <option value="14">14日</option>
                    <option value="15">15日</option>
                    <option value="16">16日</option>
                    <option value="17">17日</option>
                    <option value="18">18日</option>
                    <option value="19">19日</option>
                    <option value="20">20日</option>
                    <option value="21">21日</option>
                    <option value="22">22日</option>
                    <option value="23">23日</option>
                    <option value="24">24日</option>
                    <option value="25">25日</option>
                    <option value="26">26日</option>
                    <option value="27">27日</option>
                    <option value="28">28日</option>
                    <option value="29">29日</option>
                    <option value="30">30日</option>
                    <option value="31">31日</option>
                </select>
            </div>
        </div>

        <p class="text-muted mt10">性别</p>

        <div class="row mt5">
            <div class="col-xs-12 ">
                <select name="Gender" class="select ">
                    <!--auth Eric_wu-->
                    <option value="0" @(Model.IsMale ? "selected" : "")>男</option>
                    <option value="1" @(Model.IsFemale ? "selected" : "")>女</option>
                </select>
            </div>
        </div>
        @if (Model.Result != null && !Model.Result.Status && Model.Result.ErrorMessage != null)
        {
            <div class="item">
                <label></label>
                <div class="err_msg">@Model.Result.ErrorMessage</div>
            </div>
        }
        <div class="mb20">
            <input id="btnSubmit" type="submit" class="btn btn-warning btn-block mt20" value="保存" data-theme="a" data-role="button" />
        </div>
        <div class="clear"></div>
    </form>
</div>
@section footer
{
    <script type="text/javascript">
        $(function () {
            //让toolbar选中
            var $homeImg = $("#homeImg");
            var $categoryImg = $("#categoryImg");
            var $myaccountImg = $("#myaccountImg");
            var $searchImg = $("#searchImg");

            $homeImg.attr("src", "/Themes/RongJi/Style/base/imgs/f10.png");
            $categoryImg.attr("src", "/Themes/RongJi/Style/base/imgs/f2.png");
            $myaccountImg.attr("src", "/Themes/RongJi/Style/base/imgs/f3_c.png");
            $searchImg.attr("src", "/Themes/RongJi/Style/base/imgs/f4.png");

            if ($("#BirthDate").val()) {
                $("#selectYear").val($("#BirthDate").val().substr(0, 4));
                $("#selectMonth").val($("#BirthDate").val().substr(5, 2));
                $("#selectDate").val($("#BirthDate").val().substr(8, 2));
            }
            else {
                $("#selectYear").val("1987");
                $("#selectMonth").val("05");
                $("#selectDate").val("01");
            }

            $("#btnSubmit").click(function () {
                if ($("#Email").val() == "" || !checkMail($("#Email").val())) {
                    KevinShop.MessageBox.Alert("请输入有效的邮箱地址!");
                    return false;
                } else if ($("#CellPhone").val() == "" || !checkNum($("#CellPhone").val()) || $("#CellPhone").val().length != 11) {
                    KevinShop.MessageBox.Alert("请输入手机号!");
                    return false;
                }
                $("#BirthDate").val($("#selectYear").val() + "-" + $("#selectMonth").val() + "-" + $("#selectDate").val());


                if ($("#BirthDate").val() == "" || !isDate($("#BirthDate").val())) {
                    KevinShop.MessageBox.Alert("请输入正确的生日!");
                    return false;
                }
                document.forms["profileForm"].submit();
            });
        });
    </script>
}